<template>
  <!-- 最大的盒子 -->
  <div class="div_big">
    <div class="top-pp">
      <p><span>个人资料</span></p>
    </div>
    <div class="cen">
      <div>
        <el-form >
          <div class="content_center">
            <span>QQ</span>
            <el-input
              v-model="form.personal_data_qq"
              class="el_input"
              placeholder="请输入QQ号"
            ></el-input
            ><span id="centent">完善QQ，享受专属服务</span>
          </div>

          <div class="content_center_2">
            所在城市<el-input
              v-model="form.personal_data_city"
              class="el_input"
              placeholder="请输入所在城市"
            ></el-input
            ><span id="centent_2">方便我们举办线下聚会和寄送丰厚礼品</span>
          </div>

          <div class="content_center_3">
            <span>最高学历</span>
            <el-select
              class="el_select"
              v-model="form.personal_data_education"
              placeholder="请选择"
            >
              <el-option label="小学" value="1"></el-option>
              <el-option label="初中" value="2"></el-option>
              <el-option label="高中" value="3"></el-option>
              <el-option label="大专" value="4"></el-option>
              <el-option label="专科" value="5"></el-option>
              <el-option label="研究生" value="6"></el-option>
              <el-option label="硕士" value="7"></el-option>
              <el-option label="博士" value="8"></el-option>
            </el-select>
          </div>

          <div class="content_center_2">
            毕业院校<el-input
              v-model="form.personal_data_school"
              class="el_input"
              placeholder=""
            ></el-input>
          </div>

          <div class="content_center_3">
            <span>婚姻状况</span>
            <el-select
              class="el_select"
              v-model="form.personal_data_marital_status"
              placeholder="请选择"
            >
              <el-option label="已婚" value="1"></el-option>
              <el-option label="未婚" value="2"></el-option>
            </el-select>
          </div>

           <div class="content_center_3">
            <span>所在行业</span>
            <el-select
              class="el_select"
              v-model="form.personal_data_industry"
              placeholder="请选择"
            >
              <el-option label="律师" value="律师"></el-option> 
              <el-option label="程序员" value="程序员"></el-option>
              <el-option label="老师" value="老师"></el-option>
              <el-option label="画家" value="画家"></el-option>
              <el-option label="演员" value="演员"></el-option>
              <el-option label="设计师" value="设计师"></el-option>
              <el-option label="会计师" value="会计师"></el-option>
              <el-option label="人体无用废组织回收师" value="人体无用废组织回收师"></el-option>
            </el-select>
          </div>

          <div class="content_center_2">
            每月收入<el-input
              v-model="form.personal_data_monthly_income"
              class="el_input_2"
              placeholder=""
            ></el-input>
          </div>

          
            <el-button class="btn" type="danger" @click="onSubmit">保存</el-button>
            <!-- <el-button>取消</el-button> -->
         
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        personal_data_id:"",
        personal_data_qq:"",
        personal_data_city: "",
        personal_data_education: "",
        personal_data_school:"",
        personal_data_marital_status:"",
        personal_data_industry:"",
        personal_data_monthly_income:"",
      },
    };
  },
  methods: {
    onSubmit() {
         axios({
        url: "/api/personal/personalDataSave",
        params: { ...this.form },
      }).then((res) => {
        console.log(res);
        // this.list = res.data.data;
        this.$message({
              type: "warning",
              message: "添加成功",
            });
            this.$router.push({path:'AccountOverview1'}); 
      });
    },
  },
};
</script>

<style>
.btn{
  width: 32%;
  margin-left: 23%;
  margin-right: 5%;
}
.content_center_3 {
  width: 80%;
  height: 100%;
  margin-left: 13%;
  /* margin-top: 30px; */
}
.el_select {
  margin-left: 2.8%;
  width: 40%;
  margin-right: 20px;
}
.content_center_2 {
  width: 80%;
  height: 100%;
  margin-left: 107px;
}
#centent {
  color: rgba(243, 9, 26, 1);
  font-size: 15px;
}
#centent_2 {
  font-size: 15px;
}
.content_center {
  width: 80%;
  height: 100%;
  margin-left: 150px;
  margin-top: 30px;
}
.el_input {
  margin-left: 30px;
  width: 40%;
  margin-right: 20px;
}
.el_input_2 {
  margin-left: 25px;
  width: 40%;
  margin-right: 20px;
}
.div_big {
  width: 100%;
  height: auto;
  border-radius: 7px;
}
.top-pp {
  margin-left: 30px;
  width: 93%;
  border-radius: 7px;
  height: auto;
  /* background-color: antiquewhite; */
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}
.cen {
  margin-left: 30px;
  width: 93%;
  border-radius: 7px;
  height: 600px;
  line-height: 3.4;
  font-size: 18px;
}
</style>